<template>
  <div class="settled-content">
    <van-nav-bar title="入驻商务部" left-arrow @click-left="$router.back()" />

    <div class="fromCard">
      <van-cell class="cell">
        <span slot="title" class="cell-text">企业资料</span>
        <i slot="icon" class="cell-icon"></i>
      </van-cell>
      <div class="van-hairline--bottom"></div>

      <!-- 表单 -->
      <van-form v-model="formData" @submit="onSubmit">
        <!-- 法人类型 -->
        <van-field
          name="legalPerson"
          :value="formData.legalPerson"
          :required="true"
          :readonly="true"
          label="法人类型："
          placeholder="请选择"
          input-align="right"
          @click="legalPersonShow = true"
          :rules="[{ required: true, message: '请选择法人类型' }]"
        />
        <van-popup v-model="legalPersonShow" position="bottom">
          <van-picker
            show-toolbar
            :columns="legalPersonColumns"
            @confirm="legalPersonBtnOk"
            @cancel="legalPersonShow = false"
          />
        </van-popup>
        <div class="van-hairline--bottom"></div>
        <!-- 企业名称 -->
        <van-field
          v-model="formData.EnterpriseName"
          :required="true"
          type="text"
          label="企业名称："
          placeholder="请输入企业名称"
          input-align="right"
          :rules="[{ required: true, message: '请填写企业名称' }]"
        />
        <div class="van-hairline--bottom"></div>
        <!-- 显示名称 -->
        <van-field
          v-model="formData.DisplayName"
          :required="true"
          type="text"
          label="显示名称："
          placeholder="请输入显示名称"
          input-align="right"
          :rules="[{ required: true, message: '请填写显示名称' }]"
        />
        <div class="van-hairline--bottom"></div>
        <!-- 社会信用代码 -->
        <van-field
          v-model="formData.SocialCreditCode"
          :required="true"
          type="text"
          label="社会信用代码："
          placeholder="请输入18位统一社会信用代码"
          input-align="right"
          :rules="[
            { required: true, message: '请填写社会信用代码' },
            {
              validator(val) {
                return /[^_IOZSVa-z\W]{2}\d{6}[^_IOZSVa-z\W]{10}$/g.test(val);
              },
              message: '社会信用代码格式错误',
            },
          ]"
        />
        <div class="van-hairline--bottom"></div>
        <!-- 注册时间 -->
        <van-field
          name="registerDate"
          :value="formData.registerDate"
          :required="true"
          :readonly="true"
          label="注册日期："
          placeholder="请选择工商注册时间"
          input-align="right"
          @click="registerDateShow = true"
          :rules="[{ required: true, message: '请选择注册时间' }]"
        />
        <van-popup v-model="registerDateShow" position="bottom">
          <van-datetime-picker
            v-model="currentDate"
            type="date"
            title="请选择年月日"
            :min-date="minDate"
            :max-date="maxDate"
            @confirm="registerDateBtnOk"
            @cancel="registerDateShow = false"
            :formatter="formatter"
          />
        </van-popup>
        <div class="van-hairline--bottom"></div>
        <!-- 注册资本 -->
        <van-field
          v-model="formData.capital"
          :required="true"
          type="text"
          label="注册资本(万元)："
          placeholder="请输入注册资本"
          input-align="right"
          :rules="[{ required: true, message: '请填写注册资本' }]"
        />
        <div class="van-hairline--bottom"></div>
        <!-- 注册地区 -->
        <van-field
          name="region"
          :value="formData.region"
          :required="true"
          :readonly="true"
          label="注册地区："
          placeholder="请选择"
          input-align="right"
          @click="regionShow = true"
          :rules="[{ required: true, message: '请选择注册地区' }]"
        />
        <van-popup v-model="regionShow" position="bottom">
          <van-area
            :area-list="areaList"
            @confirm="regionBtnOk"
            @cancel="showArea = false"
          />
        </van-popup>
        <div class="van-hairline--bottom"></div>
        <!-- 企业类型 -->
        <van-field
          name="enterpriseType"
          :value="formData.enterpriseType"
          :required="true"
          :readonly="true"
          label="企业类型："
          placeholder="请选择"
          input-align="right"
          @click="enterpriseTypeShow = true"
          :rules="[{ required: true, message: '请选择企业类型' }]"
        />
        <van-popup v-model="enterpriseTypeShow" position="bottom">
          <van-picker
            show-toolbar
            :columns="enterpriseTypeColumns"
            @confirm="enterpriseTypeBtnOk"
            @cancel="enterpriseTypeShow = false"
          />
        </van-popup>
        <div class="van-hairline--bottom"></div>
        <!-- 主营业务 -->
        <van-field
          name="mainBusiness"
          label="主营业务"
          :required="true"
          :rules="[{ validator, message: '主营业务为必选' }]"
        >
          <template #input>
            <van-row type="flex" justify="end" gutter="5" style="width: 100%">
              <div v-for="(obj, index) in formData.islabelList" :key="index">
                <van-col v-if="obj.islabel" class="label-item">
                  <van-tag
                    plain
                    round
                    size="medium"
                    type="primary"
                    class="label"
                    @click="isSelectLabel(index)"
                    >{{ obj.val }}</van-tag
                  >
                </van-col>
              </div>
            </van-row>
          </template>
        </van-field>
        <van-row gutter="20" class="label-box">
          <van-col
            v-for="(obj, index) in labelList"
            :key="index"
            class="label-item"
          >
            <van-tag
              plain
              round
              size="medium"
              :color="obj.islabel ? '#979191' : ''"
              type="primary"
              class="label"
              @click="obj.islabel ? $toast('不能重复添加') : isLabel(index)"
              >{{ obj.val }}</van-tag
            >
          </van-col>
        </van-row>
        <div class="van-hairline--bottom"></div>
        <!-- 底部按钮 -->
        <van-button type="primary" block color="#3F51B5" class="button"
          >下一步</van-button
        >
      </van-form>
    </div>
  </div>
</template>

<script>
import { areaList } from "@vant/area-data";

export default {
  data() {
    return {
      formData: {
        legalPerson: "", //法人类型
        EnterpriseName: "", // 企业名称
        DisplayName: "", // 显示名称
        SocialCreditCode: "", // 社会信用代码
        registerDate: "", // 注册日期
        capital: "", // 注册资本
        region: "", // 注册地区
        enterpriseType: "", // 企业类型
        islabelList: [], // 已选择标签数组
      },
      // 校验规则
      currentDate: new Date(), // 默认选中当天日期
      minDate: new Date(2016, 0, 1),
      maxDate: new Date(),
      // 法人类型数组
      legalPersonColumns: [
        "企业法人",
        "非企业法人",
        "营利法人",
        "非营利法人",
        "特别法人",
      ],
      areaList, // 地区数据
      enterpriseTypeColumns: ["无限责任公司", "有限责任公司", "两合公司"],
      // 标签数组
      labelList: [
        { val: "月嫂", islabel: false },
        { val: "育婴师", islabel: false },
        { val: "保洁/清", islabel: false },
        { val: "保姆", islabel: false },
        { val: "早教/拖", islabel: false },
        { val: "养老/陪", islabel: false },
        { val: "家装/搬", islabel: false },
        { val: "产康师", islabel: false },
      ],
      legalPersonShow: false, // 法人类型选择框
      registerDateShow: false, // 注册日期选择框
      regionShow: false, // 注册地区选择框
      enterpriseTypeShow: false, // 企业类型选择框
    };
  },
  mounted() {
    /**
     * 特殊需求：选择日期的最大日期、最小日期；默认选中当天的日期
     * 日期的最小值可以自定义，
     * 但是日期的最大值 就是 默认选中当天的日期
     */
    // 自定义日期的最小值
    var time1 = 2010;
    var time2 = 2;
    var time3 = 8;
    this.minDate = new Date(time1, time2, time3);
  },
  methods: {
    // 法人类型确认按钮
    legalPersonBtnOk(value) {
      this.formData.legalPerson = value;
      this.legalPersonShow = false;
    },
    // 日期组件自定义格式
    formatter(type, value) {
      if (type === "year") {
        this.value1 = value; // 可以拿到当前点击的数值
        return `${value}年`;
      } else if (type === "month") {
        this.value2 = value;
        return `${value}月`;
      }
      this.value3 = value;
      return `${value}日`;
    },
    // 注册时间确认按钮
    registerDateBtnOk() {
      var selectTime = `${this.value1}年${this.value2}月${this.value3}日`;
      this.formData.registerDate = selectTime;
      this.registerDateShow = false;
    },
    // 注册地区确认按钮
    regionBtnOk(values) {
      this.formData.region = values
        .filter((item) => !!item)
        .map((item) => item.name)
        .join("/");
      this.regionShow = false;
    },
    // 企业类型确认按钮
    enterpriseTypeBtnOk(value) {
      this.formData.enterpriseType = value;
      this.enterpriseTypeShow = false;
    },
    // 标签点击事件
    isLabel(index) {
      if (this.formData.islabelList.length >= 5) {
        return this.$toast("最多只能添加5个");
      }
      this.labelList[index].islabel = true;
      this.formData.islabelList.push(this.labelList[index]);
    },
    // 已选择的标签
    isSelectLabel(index) {
      this.formData.islabelList[index].islabel = false;
      this.formData.islabelList.splice(index, 1);
    },
    // 主营业务校验规则
    validator(val) {
      if (!this.formData.islabelList.length) {
        return false;
      }
    },
    // 表单提交
    onSubmit() {
      this.$toast.success("表单提交成功");
      // 重置表单
      this.formData = {
        legalPerson: "", //法人类型
        EnterpriseName: "", // 企业名称
        DisplayName: "", // 显示名称
        SocialCreditCode: "", // 社会信用代码
        registerDate: "", // 注册日期
        capital: "", // 注册资本
        region: "", // 注册地区
        enterpriseType: "", // 企业类型
        islabelList: [], // 已选择标签数组
      };
      // 重写数据
      this.labelList = [
        { val: "月嫂", islabel: false },
        { val: "育婴师", islabel: false },
        { val: "保洁/清", islabel: false },
        { val: "保姆", islabel: false },
        { val: "早教/拖", islabel: false },
        { val: "养老/陪", islabel: false },
        { val: "家装/搬", islabel: false },
        { val: "产康师", islabel: false },
      ];
    },
  },
};
</script>

<style lang="less" scoped>
.settled-content {
  height: 100vh;
  background-color: #f8f8f8;
  /deep/.van-nav-bar__content {
    height: 150px;
    width: 100%;
    background-color: #3f51b5;
    padding-bottom: 54px;
    .van-nav-bar__left {
      height: 126px;
      margin-top: 10px;
      font-size: 32px;
      .van-nav-bar__arrow {
        color: #fff;
      }
    }
    .van-nav-bar__title {
      margin-left: 80px;
      margin-bottom: 8px;
      color: #fff;
      font-size: 32px;
      font-weight: 700;
    }
  }
  /deep/.fromCard {
    position: absolute;
    left: 24px;
    top: 126px;
    z-index: 1;
    width: 704px;
    border-radius: 10px;
    background-color: #fff;
    .cell {
      border-bottom: 2px solid #f0eeee;
      .cell-text {
        font-size: 28px;
        margin-left: 20px;
        color: #101010;
        font-weight: 700;
      }
      .cell-icon {
        width: 8px;
        height: 28px;
        background-color: #3f51b5;
        margin-top: 8px;
      }
    }
  }
  /deep/.van-field__label {
    color: #101010;
    width: 240px;
  }
  .van-from-title {
    font-size: 26px;
    font-weight: 700;
    color: #101010;
  }
  .van-icon-arrow-down {
    color: #7b7777;
    margin-top: 10px;
  }
  .van-hairline--bottom {
    border-bottom: 1px solid #f0eeee;
  }
  /deep/.label-box {
    margin: 0 36px 30px;
    .label {
      margin-bottom: 10px;
    }
  }
  .button {
    position: fixed;
    bottom: 0;
    z-index: 1;
  }
}
</style>